<app-base-dialog [dialog]="dialog">
  <form #dialogForm="ngForm" *ngIf="model">
    <div class="ui-grid-row validate-msg" >
      <ul *ngFor="let field of validates?.formErrorKeys">
        <li class="ui-grid-col-4 ui-message ui-messages-error ui-corner-all" *ngIf="validates?.formError[field]">
          <span>●</span>
          {{validates?.formError[field]}}
        </li>
      </ul>
    </div>
    <div class="ui-g">
      <div class="ui-g-12 ui-md-6">
        <div class="ui-g-12 ui-md-4">
          <span class="must-star"><span *ngIf="colsMust?.roleName">*</span></span>
          <label>{{cols.roleName.label}}</label>
        </div>
        <div class="ui-g-12 ui-md-8">
          <input pInputText #name [id]="cols.roleName.field" [name]="cols.roleName.field" [(ngModel)]="model.roleName"
                 [class.warning]="colsWarning?.roleName" required minlength="4" />
        </div>
      </div>
      <div class="ui-g-12 ui-md-6">
        <div class="ui-g-12 ui-md-4"></div>
        <div class="ui-g-12 ui-md-8">
          <!--<span class="must-star"><span *ngIf="cols.role?.validates?.required">*</span></span>-->
          <p-checkbox [id]="cols.enabled.field" [name]="cols.enabled.field"
                      [(ngModel)]="model.enabled" binary="true"
                      [label]="cols.enabled.label"></p-checkbox>
        </div>
      </div>
      <div class="ui-g-12 ui-md-12">
        <div class="ui-g-12 ui-md-2">
          <span class="must-star"><span *ngIf="colsMust?.description">*</span></span>
          <label>{{cols.description.label}}</label>
        </div>
        <div class="ui-g-12 ui-md-10">
              <textarea pInputTextarea [id]="cols.description.field" [name]="cols.description.field" style="width: 100%;height: 50px;"
                        [(ngModel)]="model.description" ></textarea>
        </div>
      </div>
    </div>
  </form>
</app-base-dialog>
